<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">出车记录</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px"></div> -->
    <!-- -->
    <div style="width:100%;height:50px;display:flex;justify-content:space-between;background:#fff">
      <picker3 :pictitle="'请选择开始时间'" :gettime.sync="grantime" :picdata="[]" :values="''" />
      <mt-field v-model="carnoid" style="width:200px;" placeholder="请输入车牌照号" />
      <div style="width:100px;">
        <span style="color:#26a2ff;line-height:55px;margin-left:30px;" @click="loadListData">查询</span>
      </div>
    </div>
    <div>
      <div class="info-title">
        <span style="border-left:3px solid #000;padding-left:5px;display:inline-block;color:#000 !important">详情列表</span>
        <span style="display:inline-block;float:right;color:#26a2ff" @click="addinfo">+添加</span>
      </div>
      <div v-if="equilist.length==0">
        <img src="../static/zanwu.png" alt style="width:100%" />
        <div style="text-align:center;color:#35495e">暂无相关内容</div>
      </div>
      <div v-for="(item, index) in equilist" v-else :key="index" class="equi-div1">
        <div class="equi-left">
          <h3 class="h3_equi">出车用途：{{ item.hash.usedetail }}</h3>
          <div class="equi-div" style="display:flex">
            <span class="equi-span2">牌照：{{ item.hash.carno }}</span>
            <!-- <span class="equi-span2">司机：{{item.bianhao}}</span> -->
            <!-- <span class="equi-span2">实际开始时间：{{item.cbianhao}}</span> -->
          </div>
          <div class="equi-div equi-gz">
            <span class="equi-span2">司机: {{ item.hash.holder }}</span>
          </div>
          <div class="equi-div equi-gz">
            <span class="equi-span2">同行人: {{ item.hash.colperson }}</span>
          </div>
          <div class="equi-div equi-gz">
            <span class="equi-span2">出行时间：{{ item.hash.recordtime }}</span>
          </div>
          <div class="equi-div equi-gz">
            <span class="equi-span2">地点：{{ item.hash.useaddress }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import picker3 from '~/components/picker3.vue'
export default {
  components: {
    picker3
  },
  layout: 'default2',
  data () {
    return {
      popupVisible: false,
      equilist: [],
      carno: '',
      htitle: '出车记录',
      ts: this.newStore(),
      carnoid: '',
      carid: '',
      grantime: '',
      carlist: []
    }
  },
  mounted () {
    this.chuchelist()
    this.getcarlist()
  },
  methods: {
    getpicval (val) {
      this.carid = val.showid
    },
    chuchelist () {
      const req = {
        handle: '0E56125B90D2898AD9707FF956BF0EE079D43E62D64A5D24',
        pid: localStorage.getItem('pid'),
        start: 0,
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.equilist = ts.d.data.operation1
        console.log(this.equilist, 'this.equlist')
      })
    },
    goequiinfo () {
      this.$router.push('/trainplaninfo')
    },
    addinfo () {
      this.$router.push({ name: 'carusedinfo' })
    },
    //查询
    loadListData () {
      const req = {
        //未完成
        handle: '0E56125B90D2898AD9707FF956BF0EE079D43E62D64A5D24',
        carno: this.carnoid,
        recordtimes: this.grantime,
        recordtimee: this.grantime,
        start: 0,
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {

        console.log(req, ts.d.data.operation1, 'reqreqreqre')
        if (ts.d.sflag == 'success') {
          this.equilist = ts.d.data.operation1
        }
      })
    },
    getcarlist () {
      const req = {
        handle: '0E56125B90D2898A62E387C1CED62EC408B04B35BD44D675',
        query: ''
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []

        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.carid
          b.showname = item.hash.carno
          a.push(b)
        }
        this.carlist = a
        console.log('11111')
      })
    },
    option () {
      this.$router.push({
        name: 'jbrhome',
        query: {
          name: ''
        }
      })
    }
  }
}
</script>
<style scoped>
.info-title {
  padding: 10px;
  color: #ccc;
  font-size: 16px;
}
html {
  background: #f3f3f3;
}
.equi-div {
  font-size: 12px;
  line-height: 20px;
  color: #000;
}
.equi-shebei {
  display: inline-block;
  padding: 1px 10px;
  color: #fff !important;
  background: rgb(51, 51, 51);
}
.h3_equi {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
}
.equi-span2 {
  width: calc(calc(100% / 2) - 10px);
}
.equi-div1 {
  font-size: 16px;
  line-height: 25px;
  /* margin: 0 10px; */
  /* border-bottom: 1px solid #ddd; */
  padding-bottom: 10px;
}
.equi-span {
  color: #35495e;
}
.equi-xq {
  line-height: 90px;
  /* padding-left: 20px; */
  color: #26a2ff;
  float: right;
  /* background: #ddd; */
  margin-top: 5px;
  width: 20%;
  text-align: center;
  border-left: 1px solid #ddd;
}
.equi-left {
  width: 100%;
  /* float: left; */
  padding-right: 0px;
  /* margin: 0 auto; */
  padding: 10px;
  background: #fff;
}
.mint-search {
  height: 7vh;
}
.mint-searchbar {
  background: #f3f3f3 !important;
}
</style>
